<template>
  <view>
    <view class="card flex flex-row">
      <view class="imageBox" @click="goDetail">
        <image :src="item.mainImage ? item.mainImage : image" mode="aspectFill" />
      </view>
      <view class="content">
        <span class="redDot" v-if="item.giftPromotionInfoList">促</span>
        <view class="goodsName" @click="goDetail">{{ item.goodsName }}</view>
        <view class="priceBox">
          <!-- <view class="price"><span class="label">￥</span>{{ item.taxPrice }}</view> -->
          <itemPrice :price="item.taxPrice"></itemPrice>
          <view class="cart" v-if="updateNum">
            <cartNumAddSub :item="item" :index="index" @updateGoodCount="updateGoodCount" @handleOperateCount="handleOperateCount" v-if="cartItems.find(_item => _item.goodsId === item.goodsId)"></cartNumAddSub>
  
            <image v-else src="/static/image/cart_icon.png" mode="widthFix" @click="updateGood" />
          </view>
        </view>
      </view>
    </view>
    <view class="line"></view>
  </view>
 
</template>

<script>
import itemPrice from '@/components/itemPrice'
import cartNumAddSub from './cartNumAddSub.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'goodsCard',
  components: { cartNumAddSub, itemPrice },
  props: {
    item: {
      type: Object,
      default: {},
    },
    updateNum: {
      type: Boolean,
      default: true,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      image: 'https://www.zjjqf.cn/file/static/undefined.png',
    }
  },
  created() {},
  computed: {
    ...mapState({
      cartItems: state => state.cart.cartItems,
    }),
    ...mapGetters(['totalPrice', 'totalGoodsCount']),
  },
  methods: {
    getImage(url) {
      const list = JSON.parse(url)
      if (list) this.image = list[0].path
      this.item.image = this.image
    },
    updateGood() {
      this.$emit('selectGoods', this.item)
    },
    goDetail() {
      this.$emit('goDetail', { item: this.item, index: this.index })
    },
    handleOperateCount(params) {
      this.$emit('operateCount', params)
    },
    updateGoodCount(params) {
      this.$emit('updateGoodCount', params)
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  padding: 32rpx 0 32rpx 20rpx;
  background: #ffffff;
  min-height: 200rpx;
  position: relative;

  .imageBox {
    /* padding-left: 20rpx; */
    margin-right: 18rpx;
    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
    }
  }
  .content {
    flex: 1;
    padding-right: 20rpx;
    position: relative;
    .goodsName {
      font-family: PingFangSC;
      font-size: 28rpx;
      min-height: 86rpx;
      width: 80%;
    }
    .priceBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        font-weight: 600;
        font-size: 32rpx;
        font-family: PingFang SC;

        color: red;
        .label {
          font-size: 26rpx;
        }
      }
      .cart {
      
        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
.selected {
  width: 100rpx;
  height: 50rpx;
  position: absolute;
  background: red;
  color: #ffffff;
  border-radius: 15rpx;
  right: 30rpx;
  bottom: 50rpx;
  font-weight: 600;
  font-size: 26rpx;
}
.redDot {
  font-family: PingFang SC;
  background: #ffffff;
  display: flex;
  justify-content: center;
  border-radius: 30rpx;
  width: 40rpx;
  height: 40rpx;
  color: red;
  font-size: 30rpx;
  font-weight: 600;
  border: red 1px solid;
  position: absolute;
  right: 20rpx;
  top: 10rpx;
}
.line{
  height: 1px;
  background-color: #EDEFF4;
  margin: 0 20rpx;
}
</style>
